// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { h, fragment } from '@knno/dom/jsx';
import { Button } from '@knno/ui/jsx/button';
import { Tag, UITag } from '@knno/ui/jsx/tag';
import { bar } from './index.css';
import Person from '@material-design-icons/svg/filled/person.svg';
import { Action } from '@knno/ui/action';
import { TagValue } from '../../../dist/jsx/tag';

export function ShowTag() {
	let lb: UITag;
	return (
		<>
			<h2>标签</h2>
			<div class={bar}>
				<Tag
					options={['备选项', '另一个备选', 'option1', { value: 1, text: 'option2' }]}
					placeholder="请输入..."
					max={3}
					prefixIcon={Person}
					ref={(t) => (lb = t)}
				/>

				<Button
					text="赋值"
					onclick={() => {
						lb.value(['value1', 'value2', { value: 'v3', text: '取值3' }]);
					}}
				/>
				<Button
					text="切换只读"
					onclick={() => {
						lb.readonly(!lb.readonly());
					}}
				/>
				<Button
					text="切换禁用"
					onclick={() => {
						lb.disabled(!lb.disabled());
					}}
				/>
				<Button
					text="切换只能选则"
					onclick={() => {
						lb.selectOnly(!lb.selectOnly());
					}}
				/>
				<Tag
					placeholder="自定义输入..."
					prefixIcon={Person}
					selectOnly
					onPopup={() => {
						return new Promise<TagValue[]>((resolve) => {
							const ac = Action.show(
								<div
									onclick={() => {
										ac.close();
										resolve(['value1', 'value2']);
									}}
								>
									hello
								</div>
							);
						});
					}}
				/>
			</div>
		</>
	);
}
